<template>
  <div class="comp-configset">
    <Row class-name="top">
      <Col span="12">
      <Button v-if="!codemode" type="primary" icon="md-add" @click="addProp">{{$t('button.add')}} Prop</Button>&nbsp;
      </Col>
      <Col span="12" class="right">
      <Switch class="switch" @on-change="changeMode">
        <Icon type="ios-code" size="14" color="#fff" slot="open"></Icon>
        <Icon type="ios-list" size="14" slot="close"></Icon>
      </Switch>
      </Col>
    </Row>
    <Input v-if="codemode" v-model="proptext" type="textarea" :autosize="{minRows:20}" @on-blur="textChanged" />
    <div v-else>
      <Row :gutter="10" v-for="(prop, index) in proplist" class-name="proprow" :key="index">
        <Col span="10">
        <AutoComplete :transfer="true" v-model="prop.name" :data="search.names" @on-search="searchName" @on-change="propChanged" clearable></AutoComplete>
        </Col>
        <Col span="10">
        <AutoComplete :transfer="true" v-model="prop.value" :data="search.values" @on-search="searchValue" @on-change="propChanged" clearable></AutoComplete>
        </Col>
        <Col span="4" class="right"><Button type="error" long @click="delProp(index)">{{$t('button.delete')}} Prop</Button></Col>
      </Row>
    </div>
  </div>
</template>
 
<script>
  import { def_names, def_values } from '@/config/propdef'
  export default {
    name: "comp-configset",
    props: {
      profile: String,
      properties: String
    },
    data() {
      return {
        codemode: false,
        proplist: [],
        proptext: '',
        search: {
          names: [],
          values: []
        }
      }
    },
    watch: {
      properties(val) {
        this.initProps(val)
      }
    },
    mounted() {
      this.initProps(this.properties)
    },
    methods: {
      initProps(properties) {
        let proplist = []
        if (properties && properties.length > 0) {
          let propmap = JSON.parse(properties)
          for (let n in propmap) {
            proplist.push({
              name: n,
              value: propmap[n],
            })
          }
        }
        this.proplist = proplist
        if (this.proplist.length === 0) this.addProp()
        // ====================================================
        this.propChanged()
      },
      changeMode() {
        this.codemode = !this.codemode
      },
      addProp() {
        this.proplist.push({
          name: '',
          value: '',
        })
      },
      searchName(val) {
        this.search.names = this.doSearch(def_names, val)
      },
      searchValue(val) {
        this.search.values = this.doSearch(def_values, val)
      },
      doSearch(arr, val) {
        let search = []
        let counter = 0
        for (let i in arr) {
          if (arr[i].indexOf(val) !== -1) {
            search.push(arr[i])
            if (counter < 10) {
              counter++
            } else {
              break
            }
          }
        }
        return search
      },
      delProp(index) {
        this.$Modal.confirm({
          title: this.$t('delmodel.title'),
          content: this.$t('delmodel.content'),
          onOk: () => {
            this.proplist.splice(index, 1)
          }
        })
      },
      textChanged() {
        let proplist = []
        let textarr = this.proptext.split('\n')
        let pv
        for (let i in textarr) {
          if (!textarr[i]) continue
          pv = textarr[i].split('=')
          if (pv.length === 2) {
            proplist.push({
              name: pv[0],
              value: pv[1],
            })
          }
        }
        this.proplist = proplist
        this.emitChanged()
      },
      propChanged() {
        let prop
        let proptexts = []
        for (let i in this.proplist) {
          prop = this.proplist[i]
          if (prop.name) proptexts.push(prop.name, '=', prop.value, '\n')
        }
        this.proptext = proptexts.join('')
        this.emitChanged()
      },
      emitChanged() {
        this.$emit('onChanged', this.profile, this.proplist)
      }
    }
  };
</script>

<style scoped>
  .comp-configset {
    position: relative;
  }
  .comp-configset .top {
    margin-bottom: 10px;
  }
  .comp-configset .proprow {
    margin-top: 10px;
  }
</style>
